<template>
	<view class="cantainer">
		<!-- <image class="top-image" src="../../static/images/topbg2png.png" mode=""></image> -->
		<view class="top-image"></view>
		<view class="userinfo">
			<image :src="userinfo.avatar" mode=""></image>
			<view class="user" style="color: #C5996A;">
				<view>
					{{ userinfo.nickname }}
					<text class="tag" v-if="userinfo.type == 3">茶艺师</text>
				</view>
				<view>{{ userinfo.mobile }}</view>
			</view>
			<view class="switch" style="color: #C5996A;display: flex;align-items: center;">
				<view class="" style="margin-right: 12rpx;">{{ switch1 ? '上班' : '下班' }}</view>
				<u-switch activeColor="#C5996A" v-model="switch1" @change="change"></u-switch>
			</view>
		</view>
		<!-- tab -->
		<view class="tab" @click="goPath('/pages/user/edituserinfo/edituserinfo')">
			<view>个人资料</view>
			<image src="../../static/images/left.png" mode=""></image>
		</view>
		<view class="tab" @click="goPath('/pages/user/wallet/wallet')">
			<view>我的账户</view>
			<image src="../../static/images/left.png" mode=""></image>
		</view>
		<view class="tab" v-if="shenqing1 == 1" @click="goPath('/pages/user/bankcard/bankcard')">
			<view>银行卡</view>
			<image src="../../static/images/left.png" mode=""></image>
		</view>
		<view class="tab" @click="goPath('/pages/user/editimage/editimage')">
			<view>照片修改</view>
			<image src="../../static/images/left.png" mode=""></image>
		</view>
		<view class="tab" @click="goPath('/pages/user/editaddress/editaddress')">
			<view>服务范围地址</view>
			<image src="../../static/images/left.png" mode=""></image>
		</view>
		<view class="tab" style="justify-content: center;height: 100rpx;" @click="logout">
			<view style="color: #f00;">退出</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// userinfo: uni.getStorageSync('userinfo')
				userinfo: {},
				switch1: false,
				shenqing1: 0
			};
		},
		onShow() {
			if (!uni.getStorageSync('token')) {
				return this.goLogins();
			}
			this.getInfo();
			this.checkWork();
		},
		onLoad() {
			this.switch();
		},
		methods: {
			logout() {
				uni.showModal({
					title: '您确定退出吗?',
					success: ({ cancel }) => {
						uni.setStorageSync('token', '')
						uni.showToast({
							title: '退出成功!',
							duration: 1000,
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}, 1100)
					}
				})
			},
			// 申请成为茶艺师是否显示
			switch () {
				this.http('/api/aunt/ison', {}).then(res => {
					this.shenqing1 = res.data;
				});
			},
			switchtype(e) {
				this.https('/order/updateWork', { type: e }).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				});
			},
			change(e) {
				let type = 1;
				if (e) {
					type = 1;
				} else {
					type = 0;
				}
				this.switchtype(type);
			},
			checkWork() {
				this.https('/order/checkWork', {}).then(res => {
					if (res.data == 1) {
						this.switch1 = true;
					} else {
						this.switch = false;
					}
				});
			},
			getInfo() {
				this.https('/order/getUserinfo', {}).then(res => {
					const { avatar } = res.data
					if (!avatar.includes('https')) {
						res.data.avatar = 'https://sanju.xinyunweb.com' + avatar
					}
					this.userinfo = res.data;
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.switch {
		position: fixed;
		right: 32rpx;
		top: 100rpx;
		display: flex;
		color: #fff;
	}

	.tag {
		margin-left: 10rpx;
		border-radius: 8rpx;
		padding: 8rpx 16rpx;
		font-size: 24rpx;
		border: 1px solid rgba(255, 255, 255, 0.5);
		// color: #45bb52;
		background-color: rgba(0, 0, 0, 0.1);
	}

	.cantainer {
		background-size: 750rpx 504rpx;
	}

	.top-image {
		width: 750rpx;
		height: 250rpx;
		position: relative;
		object-fit: cover;
		background-color: #F2EDDC;
	}

	.userinfo {
		position: absolute;
		left: 40rpx;
		top: 60rpx;
		display: flex;
		align-items: center;

		image {
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
			border: 2px solid #fff;
			margin-right: 44rpx;
		}

		.user {
			color: #fff;
			height: 100rpx;
			line-height: 60rpx;
		}
	}

	.tab {
		width: 630rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 110rpx;
		background: #ffffff;
		box-shadow: 0px 0px 12rpx 0px rgba(189, 189, 189, 0.5);
		border-radius: 16rpx;
		padding: 0 20rpx;
		margin-top: 32rpx;

		image {
			width: 14rpx;
			height: 28rpx;
		}

		view {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}
</style>